<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telphone=no, email=no">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="description" content="首页-顶部">
    <meta name="robots" content="">
    <title></title>
    <link rel="stylesheet" href="https://xzwx.oss-cn-shanghai.aliyuncs.com/xzyd/css/nmt/reset.css">
    <link rel="stylesheet" href="./css/pub/common.css">

    <script src="https://xzwx.oss-cn-shanghai.aliyuncs.com/xzyd/js/nmt/jquery.1.8.js"></script>
</head>

<body>
    <div class="header">
        <ul class="header-top w">
            <li><img class="icon-logo" src="./img/logo02.png" alt=""></li>
            <li><span class="logoText">天基卫星信息资源系统</span></li>
            <li><a href="" class="link linking">照片</a></li>
            <li><a href="" class="link">视频</a></li>
            <li><a href="" class="link">音频</a></li>
            <li><a href="" class="login">注册 / 登录</a></li>
        </ul>
        <ul class="searchBox clear">
            <li class="fl"><input type="text" placeholder="请输入关键字开始搜索" class="search"></li>
            <li class="fr"><button class="icon-search"></button>></li>
            <li class="fr">
                <div class="select-type clear">
                    <span class="selectedText fl">全部图片</span>
                    <img class="icon-selected fl" src="./img/arrow01.png" alt="">
                    <ul class="selectType-bottom none">
                        <li>全部图片</li>
                        <li>照片</li>
                        <li>矢量</li>
                        <li>视频</li>
                        <li>音频</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            //类名linking控制“照片 视频 音频”当前的选中状态
            //类名selected控制搜索左侧下拉菜单中悬浮元素的选中状态

            //点击头部搜索按钮左侧下拉菜单，达到切换其显示与隐藏的动态效果
            $('.select-type').on('click', function (event) {
                const this_bottom = $(this).find('.selectType-bottom');
                if ($(this_bottom).hasClass('none')) {
                    $(this_bottom).removeClass('none');
                } else {
                    $(this_bottom).addClass('none');
                }
                if (event.target.tagName === 'LI') {
                    const SELECTED_TEXT = $(event.target).text();
                    $('.selectedText').text(SELECTED_TEXT);
                }
            })

            $('.selectType-bottom li').hover(function () {
                $(this).addClass('selected');
             }, function () {
                 $(this).removeClass('selected');
            })
        })

    </script>

</body>

</html>